<template>
  <div class="orderDetail" :class="{ 'show-more-open': showMore }">
    <div class="energy-title">
      <div class="nav-left">
        <span class="iconfont backHistory" @click="spotCheckView">
          &#xe6eb;
        </span>
      </div>
      <div class="nav-center">
        隐患详情
      </div>
      <div class="nav-right">
        <iconSvg
          name="home"
          w="20px"
          h="22px"
          class="right_icon"
          @click.native="backToHomepage"
        ></iconSvg>
      </div>
    </div>
    <div class="cate-nfo">
      <div class="cate-nfo-other">
        <div>隐患信息</div>
        <div>{{ detail.troubleLevel }}</div>
      </div>
      <div class="info-list">
        <div class="info-list-title">
          <div>{{ detail.checkPoint }}</div>
        </div>
        <div class="info-list-item">
          <div class="info-title">执行人：</div>
          <div class="info-value">{{ detail.submitterName || "" }}</div>
        </div>
        <div class="info-list-item">
          <div class="info-title">所属部门：</div>
          <div class="info-value">{{ detail.departmentName || "" }}</div>
        </div>
        <div class="info-list-item">
          <div class="info-title">隐患类型：</div>
          <div class="info-value">{{ detail.troubleType || "" }}</div>
        </div>
        <div class="info-list-item">
          <div class="info-title">详细说明：</div>
          <div class="info-value">{{ detail.remark || "" }}</div>
        </div>
        <div class="info-list-item">
          <div class="info-title">附件：</div>
          <div class="info-value">
            <template v-if="detail.pictures">
              <x-img
                v-for="(item, index) in detail.pictures.split(',')"
                :src="item"
                :key="index"
                @click.native="showImage(index, detail.pictures.split(','))"
              ></x-img>
            </template>
          </div>
        </div>
      </div>
      <div class="cate-nfo-other">
        <div>整改信息</div>
        <div>{{ statusArr[detail.status] }}</div>
      </div>
      <div class="info-list">
        <div class="info-list-item">
          <div class="info-title">整改部门：</div>
          <div class="info-value">
            {{ detail.rectificationDepartmentName || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">整改人：</div>
          <div class="info-value">
            {{ detail.rectificationLeaderName || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">整改期限：</div>
          <div class="info-value">
            {{ detail.rectificationTime | formatDate("YYYY-MM-DD HH:mm") }}
          </div>
        </div>
      </div>
      <div
        class="info-list"
        v-for="item in detail.handleList || []"
        :key="item.id"
      >
        <div class="info-list-title">
          <div>{{ item.type == 1 ? "整改" : "验收" }}详情</div>
        </div>
        <div class="info-list-item" v-if="item.type == 2">
          <div class="info-title">验收结果：</div>
          <div class="info-value">
            {{ item.acceptanceStatus === 1 ? "合格" : "不合格" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">
            {{ item.type == 1 ? "治理措施" : "验收描述" }}：
          </div>
          <div class="info-value">
            {{ item.description || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">
            {{ item.type == 1 ? "提交" : "验收" }}人：
          </div>
          <div class="info-value">
            {{ item.operatorName || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">
            {{ item.type == 1 ? "提交" : "验收" }}时间：
          </div>
          <div class="info-value">
            {{ item.operatorTime | formatDate("YYYY-MM-DD HH:mm") }}
          </div>
        </div>
        <div class="info-list-item" v-if="item.pictures">
          <div class="info-title">附件：</div>
          <div class="info-value">
            <template>
              <x-img
                v-for="(e, i) in item.pictures.split(',')"
                :src="e"
                :key="i"
                @click.native="showImage(i, item.pictures.split(','))"
              ></x-img>
            </template>
          </div>
        </div>
      </div>
      <div class="detail-btn">
        <div
          class="btn"
          @click="eventDetail"
          v-if="
            (detail.status == 1 || detail.status == 5) &&
              detail.rectificationLeader == (user && user.id)
          "
        >
          整改
        </div>
        <div
          class="btn"
          @click="eventDetail"
          v-if="
            detail.status == 3 && detail.acceptanceLeader == (user && user.id)
          "
        >
          验收
        </div>
      </div>
    </div>
    <showImg
      :list="fileList"
      :index="showImgIndex"
      :show.sync="showImg"
    ></showImg>
  </div>
</template>

<script>
import { XImg, XInput, XDialog, TransferDom } from "vux";
import showImg from "@/components/common/showImg/showImg";
import { GetUser } from "@/mixin";
import SafetyManageDao from "@/daos/safety_manage_dao";

export default {
  directives: {
    TransferDom
  },
  inject: ["backToHomepage"],
  components: {
    showImg,
    XImg,
    XInput,
    XDialog
  },
  data() {
    return {
      detail: {},
      imgUrl: "",
      showDialogImg: false,
      showMore: false,
      id: 0,
      status: 0,
      fileList: [],
      statusArr: [
        "待整改",
        "待整改",
        "",
        "待验收",
        "",
        "已逾期",
        "",
        "已验收",
        "",
        "逾期完成"
      ],
      showImg: false,
      showImgIndex: 0,
      type: 1
    };
  },
  computed: {
    user() {
      return this.$store.state.user;
    }
  },
  mixins: [GetUser],
  created() {
    if (!this.user) {
      this.getUser();
    }
  },
  activated() {
    this.id = this.$route.query.id || 0;
    if (this.id) {
      this.getCheckTroubleDetails(this.id);
    }
  },
  methods: {
    spotCheckView() {
      this.$router.go(-1);
    },
    getCheckTroubleDetails(id) {
      SafetyManageDao.getCheckTroubleDetails(id, res => {
        if (res) {
          this.detail = res;
        }
      });
    },
    toWorkSheetNo(id) {
      this.$router.push({
        name: "workOrderDetails",
        query: {
          id
        }
      });
    },
    eventDetail() {
      let { id, status } = this.detail;
      this.$store.commit("setTrouble", this.detail);
      this.$router.push({
        name: "safetyRisksResult",
        query: {
          id,
          status
        }
      });
    },
    showImage(index, files) {
      this.fileList.splice(0);
      this.fileList = files;
      this.showImgIndex = index;
      this.showImg = true;
    }
  }
};
</script>
<style lang="less">
// .info-list {
//   .vux-table.vux-table-bordered::before {
//     background-color: #c7c7c7;
//   }
//   .vux-table::after {
//     background-color: #c7c7c7;
//   }
// }
</style>
<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transform: translateY(0);
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(-140%);
}

.orderDetail {
  width: 100%;
  height: 100vh;
  background-color: #18182c;
  &.show-more-open {
    overflow: hidden;
  }
  .energy-title {
    height: 44px;
    background: #18182c;
    padding: 0 15px;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    position: relative;
    .backHistory {
      font-size: 26px;
      color: #fff;
    }
    .nav-left {
      display: flex;
      align-items: center;
    }
    .nav-center {
      color: #fff;
      line-height: 44px;
      text-align: center;
    }
    .nav-border-left {
      border-left: 2px solid #fff;
      height: 16px;
    }
    .nav-right {
      position: relative;
      // width: 30px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .paidan {
        margin-top: -8px;
        i {
          font-size: 26px;
        }
      }
    }
  }

  .detail-btn {
    width: 100%;
    padding: 6px;
    .btn {
      width: 40%;
      margin: 0 auto;
      padding: 8px 0;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      background: #3967dc;
      border-radius: 5px;
    }
  }
}
.cate-nfo {
  height: auto;
  // min-height: calc(~"100vh" - 80px);
  padding: 8px 16px 8px;
  border-radius: 8px;
  background-color: #18182c;
  .info-list {
    background: #22233f;
    padding: 8px 0;
    margin: 16px 0;
    // min-height: 260px;
    border-radius: 5px;
    overflow: hidden;
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
      margin: 8px 0;
      padding: 0 8px;
    }
    .info-list-title {
      color: #fff;
      font-size: 16px;
      margin: -8px 0 0;
      padding: 4px 8px;
      display: flex;
      justify-content: space-between;
      background-color: #2e2f4f;
    }
    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      // margin-right: 30px;
      width: 88px;
      text-align: right;
    }

    .info-value {
      flex: 1;
      font-size: 16px;
      color: #fff;

      .status1,
      .status4 {
        color: #4fa8e7;
      }
      .status3 {
        color: #456de6;
      }
      .status5,
      .status7,
      .status11 {
        color: #dd9710;
      }
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }
    }
    .modify-btn {
      font-size: 14px;
      margin-left: 8px;
      color: gray;
    }
    .warning {
      color: #ff2c2c;
    }
    .modify {
      font-size: 16px;
      padding: 8px;
      color: rgba(255, 255, 255, 0.5);
    }
  }
  .cate-nfo-other {
    font-size: 16px;
    // padding: 0 16px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: space-between;
  }
}
</style>
<style lang="less">
.energy-img-dialog {
  .img-close {
    text-align: right;
    margin-right: 24px;
    margin-top: 30px;
  }
  .show-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
    img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
